<template>
  <div>
    <div class="goodsindex">
      <!-- 搜索条件 -->
      <el-row :gutter="20" class="goodsindex-queryInfo">
        <el-col :xs="8" :sm="5" :md="5" :lg="5" :xl="5">
          <el-input
            class="goodsindex-queryInfo-li"
            v-model="queryInfo.userCompany"
            clearable
            size="small"
            placeholder="请输入用户单位"
          ></el-input>
        </el-col>
        <el-col :xs="8" :sm="5" :md="5" :lg="5" :xl="5">
          <el-input
            class="goodsindex-queryInfo-li"
            v-model="queryInfo.exitNumber"
            clearable
            size="small"
            placeholder="请输入产品序号"
          ></el-input>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6">
          <el-date-picker
            class="goodsindex-queryInfo-li"
            v-model="value1"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
          <el-button
            type="primary"
            class="goodsindex-queryInfo-li"
            size="small"
            @click="select"
            >搜索</el-button
          >
        </el-col>
        <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
          <el-button
            type="primary"
            class="goodsindex-queryInfo-li"
            size="small"
            v-if="isAuth('sys:productSummary:export')"
            @click="exportHandl()"
            >导出</el-button
          >
        </el-col>
        <!-- <el-col
          :xs="6"
          :sm="4"
          :md="3"
          :lg="2"
          :xl="2"
          v-if="isAuth('sys:maintenance:save')"
        >
          <el-button
            type="primary"
            class="goodsindex-queryInfo-li"
            size="small"
            @click="addOrUpdatehandle()"
            >添加</el-button
          > 
        </el-col>-->
      </el-row>
      <!-- 检索结果 -->
      <el-row :gutter="20" class="goodsindex-list">
        <el-col :span="24" class="goodsindex-list-col">
          <el-table
            :data="menuList"
            style="width: 100%"
            :height="tableMaxHeight"
            border
          >
            <el-table-column
              type="index"
              header-align="center"
              align="center"
              label="序号"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="userCompany"
              label="用户单位"
              header-align="center"
            />
            <el-table-column
              prop="serviceLocation"
              label="服务地点"
              header-align="center"
            />
            <el-table-column
              prop="contactPerson"
              label="联系人"
              header-align="center"
            />
            <el-table-column prop="phone" label="电话" header-align="center" />
            <el-table-column
              prop="contractNumber"
              label="合同号"
              header-align="center"
            />
            <el-table-column
              prop="productModel"
              label="产品型号"
              header-align="center"
            />
            <el-table-column
              prop="exitNumber"
              label="产品序号"
              header-align="center"
            />
            <el-table-column
              prop="serviceTime"
              label="服务时间"
              header-align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              width="210"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  size="mini"
                  v-if="isAuth('sys:maintenance:look')"
                  @click="handleLook(scope.row.id)"
                  >查看</el-button
                >
                <el-button
                  v-if="isAuth('sys:maintenance:update')"
                  size="mini"
                  type="primary"
                  @click="addOrUpdatehandle(scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  v-if="isAuth('sys:maintenance:delete')"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row :gutter="20">
        <el-col :span="24" style="display: flex; justify-content: flex-end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[1, 10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <userAddorUpdata
        v-if="userAddorUpdataVisible"
        ref="userAddorUpdata"
        @getMenuList="getMenuList"
      ></userAddorUpdata>
      <look v-if="lookVisible" ref="look"></look>
    </div>
  </div>
</template>

<script>
import { treeDmodelataTranslate } from "../../utils/treeDataTranslate.js";
import userAddorUpdata from "./addorupdate.vue";
import look from "./look.vue";
export default {
  components: {
    userAddorUpdata,
    look,
  },
  data() {
    return {
      userAddorUpdataVisible: false, //菜单权限
      tableData: [],
      dataForm: {},
      menuList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      addOrUpdateVisible: false,
      lookVisible: false,
      tableHeight: "",
      queryInfo: {
        userCompany: null,
        exitNumber: null,
      },
      value1: [],
      startTime: "",
      endTime: "",
    };
  },
  computed: {
    tableMaxHeight() {
      return window.innerHeight - 180 + "px";
    },
  },
  created() {
    // this.startTime = this.getYear();
    // this.endTime = this.commonAddMouth();
    // this.value1 = [this.startTime, this.endTime];
    this.getMenuList();
  },
  methods: {
    commonAddMouth() {
      let dat = new Date();
      //获取年月日，时间
      var year = dat.getFullYear();
      var mon =
        dat.getMonth() + 1 < 10
          ? "0" + (dat.getMonth() + 1)
          : dat.getMonth() + 1;
      var data = dat.getDate() < 10 ? "0" + dat.getDate() : dat.getDate();
      var hour = dat.getHours() < 10 ? "0" + dat.getHours() : dat.getHours();
      var min =
        dat.getMinutes() < 10 ? "0" + dat.getMinutes() : dat.getMinutes();
      var seon =
        dat.getSeconds() < 10 ? "0" + dat.getSeconds() : dat.getSeconds();

      var newDate =
        year + "-" + mon + "-" + data + " " + hour + ":" + min + ":" + seon;

      return newDate;
    },
    getYear(index = 1) {
      let dateTime = new Date(); /* 获取现在的年份 */
      // dateTime.setFullYear(dateTime.getFullYear() + Number(index));
      dateTime.setMonth(dateTime.getMonth() - Number(index));
      // dateTime.setDate(dateTime.getDate() - 1);
      dateTime.setDate(dateTime.getDate());
      var y = dateTime.getFullYear();
      var m = dateTime.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = dateTime.getDate();
      d = d < 10 ? "0" + d : d;
      var h = dateTime.getHours();
      h = h < 10 ? "0" + h : h;
      var min = dateTime.getMinutes();
      min = min < 10 ? "0" + min : min;
      var s = dateTime.getSeconds();
      s = s < 10 ? "0" + s : s;
      let date = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
      console.log(date);
      return date;
    },
    //搜素
    async select() {
      this.pageIndex = 1;
      await this.getMenuList();
    },
    getMenuList() {
      this.Sevice({
        url: "syn/maintenance/list",
        method: "get",
        params: {
          userCompany: this.queryInfo.userCompany,
          exitNumber: this.queryInfo.exitNumber,
          startTime: this.value1 && this.value1.length ? this.value1[0] : null,
          endTime: this.value1 && this.value1.length ? this.value1[1] : null,
        },
      })
        .then(async (res) => {
          if (res && res.code == 200) {
            // res.data.sort(function (a, b) {
            //   return a.createTime < b.createTime ? 1 : -1;
            // });
            this.menuList = res.list;
            this.totalPage = this.menuList.length;
            this.menuList = this.menuList.slice(
              (this.pageIndex - 1) * this.pageSize,
              this.pageIndex * this.pageSize
            );
          } else {
            this.menuList = [];
            this.totalPage = 0;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新增 / 修改
    addOrUpdatehandle(id) {
      this.userAddorUpdataVisible = true;
      this.$nextTick(() => {
        this.$refs.userAddorUpdata.init(id);
      });
    },
    handleLook(id) {
      this.lookVisible = true;
      this.$nextTick(() => {
        this.$refs.look.init(id);
      });
    },
    //删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.Sevice({
            url: "syn/maintenance/delete",
            method: "post",
            data: [id],
          })
            .then((res) => {
              if (res && res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getMenuList();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMenuList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getMenuList();
    },
    //导出
    exportHandl() {
      this.Sevice({
        url: "syn/maintenance/list/export",
        method: "post",
        data: JSON.stringify({
          userCompany: this.queryInfo.userCompany,
          exitNumber: this.queryInfo.exitNumber,
          startTime: this.value1 && this.value1.length ? this.value1[0] : null,
          endTime: this.value1 && this.value1.length ? this.value1[1] : null,
        }),
        headers: { "Content-Type": "application/json" },
        responseType: "blob",
      })
        .then((response) => {
          console.log(response);
          if (response.data.type == "application/json") {
            this.$message({
              message: "未知异常，请联系管理员",
              type: "error",
              duration: 1500,
            });
            return false;
          }
          if (response.data.code && response.data.code == 500) {
            this.$message.error(response.data.msg);
          } else {
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel",
            });
            // const fileName = decodeURI(response.headers["content-disposition"].split("=")[1]);
            const fileName = "现场运维-" + this.getYMD() + ".xlsx";
            let objectUrl = URL.createObjectURL(blob); // 创建URL
            const link = document.createElement("a");
            link.href = objectUrl;
            // link.download = '.xlsx'// 自定义文件名
            //这里是获取后台传过来的文件名
            link.setAttribute("download", fileName);
            link.click(); // 下载文件
            URL.revokeObjectURL(objectUrl); // 释放内存
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getYMD() {
      let myDate = new Date();
      let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let myToday = myDate.getDate(); //获取当前日(1-31)
      myMonth = myMonth > 9 ? myMonth : "0" + myMonth;
      myToday = myToday > 9 ? myToday : "0" + myToday;
      let nowDate = myYear + "-" + myMonth + "-" + myToday;
      return nowDate;
    },
  },
};
</script>

<style scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px;
}
.goodsindex-list-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}
</style>
